<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mui-lib/css/mui.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script src="mui-lib/js/mui.min.js"></script>
    <title>Online Phone</title>
</head>
<body>
    <div id="phone">
        <div id="title">
            消息记录
        </div>
        <div id="msg">
            <div id="search">
                <div class="mui-input-row mui-search">
                    <input type="search" class="mui-input-clear" style="margin-bottom: 0px;" placeholder="">
                </div>
            </div>
            <div class="message">
                <img src="image/head.jpg" alt="">
                <div class="info">
                    <p>罗顺滑</p>
                    <p>kkp</p>
                </div>
                <span class="mui-badge mui-badge-primary">1</span>
            </div>
        </div>
        <div id="friends" style="display: none;">
            <div id="search">
                <div class="mui-input-row mui-search">
                    <input type="search" class="mui-input-clear" style="margin-bottom: 0px;" placeholder="">
                </div>
            </div>
            <div class="friend">
                <img src="image/head.jpg" alt="">
                <p>罗舜华</p>
            </div>
            <div class="friend">
                <img src="image/head.jpg" alt="">
                <p>舜华爹</p>
            </div>
            <div class="friend">
                <img src="image/head.jpg" alt="">
                <p>舜华妈</p>
            </div>
            <div class="friend">
                <img src="image/head.jpg" alt="">
                <p>舜华爷</p>
            </div>
            <div class="friend">
                <img src="image/head.jpg" alt="">
                <p>舜华奶</p>
            </div>
            <div class="friend">
                <img src="image/head.jpg" alt="">
                <p>舜华舅</p>
            </div>
            <div class="friend">
                <img src="image/head.jpg" alt="">
                <p>舜华姑</p>
            </div>
            <div class="friend">
                <img src="image/head.jpg" alt="">
                <p>舜华姐</p>
            </div>
            <div class="friend">
                <img src="image/head.jpg" alt="">
                <p>舜华哥</p>
            </div>
        </div>
        <div id="settings"  style="display: none;">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    新消息通知
                    <div class="mui-switch mui-switch-mini">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    允许添加好友
                    <div class="mui-switch mui-switch-mini">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    夜间模式
                    <div class="mui-switch mui-switch-mini">
                        <div class="mui-switch-handle" id="nightmode"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    密码修改
                </li>
                <li class="mui-table-view-cell">
                    注销
                </li>
                <li class="mui-table-view-cell">
                    关于
                </li>
            </ul>
        </div>
        <div id="nav">
            <div class="item">
                <span class="mui-icon mui-icon-chatbubble"></span>
                <p>消息</p>
            </div>
            <div class="item">
                <span class="mui-icon mui-icon-person"></span>
                <p>好友</p>
            </div>
            <div class="item">
                <span class="mui-icon mui-icon-compose"></span>
                <p>设置</p>
            </div>
        </div>
    </div>
    <script>
        $('.item').click(function(){
            var index = $(this).index();
            $('#friends').css("display","none");
            $('#msg').css("display","none");
            $('#settings').css("display","none");
            if(index == 0){
                $("#title").text("消息记录");
                $('#msg').css("display","flex");
            }else if(index == 1){
                $("#title").text("联系人");
                $('#friends').css("display","flex");
            }else{
                $("#title").text("设置");
                $('#settings').css("display","flex");
            }
        });

        $('#nightmode').click(function(){
            var isActive = $('.nightmode').hasClass("mui-active");
            mui.toast('切换成功')
            if(!isActive){

            }else{
            }
        });




    </script>
</body>
</html>